<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户贡献分析</title>
</head>
<%--<script src="../../../jquery/ECharts/echarts.min.js"></script>
<script src="../../../jquery/ECharts/echarts.simple.min.js"></script>--%>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <link href="../../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="../../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="../../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script><script type="text/javascript">
    $(function () {

        //模糊查询，待实现，额外写一个ajax
        $("#searchBtn").click(function () {
            alert("我被点击了"+$.trim($("#chart-contribution-year").val())+"   "+$.trim($("#chart-contribution-custName").val()));
            getData();
        });

        getData();
        function getData() {
            $.ajax({

                url: "/chart/contribution/init",
                type: "get",
                dataType: "json",
                success: function (data) {

                    var html = "";

                    var chartJson = [];
                    //给chart一个字段
                    var cloumn = ['信用分', '消费金额', '客户'];
                    chartJson.push(cloumn);

                    //每一个n就是每一个市场活动对象
                    $.each(data, function (i, n) {

                        html += '<tr class="active">';
                        html += '<td>' + n.custNo + '</td>';
                        html += '<td>' + n.custName + '</td>';
                        html += '<td>' + n.total + '</td>';
                        html += '</tr>';

                        var obj = [];
                        obj[0] = n.credit;
                        obj[1] = n.total;
                        obj[2] = n.custName;
                        chartJson.push(obj);

                    });


                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    var option = {
                        dataset: {
                            source: chartJson
                        },
                        grid: {containLabel: true},
                        xAxis: {name: '消费金额'},
                        yAxis: {type: 'category'},
                        visualMap: {
                            orient: 'horizontal',
                            left: 'center',
                            min: 10,
                            max: 100,
                            text: ['高信用', '低信用'],
                            // Map the score column to color
                            dimension: 0,
                            inRange: {
                                color: ['#D7DA8B', '#E15457']
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                encode: {
                                    // Map the "amount" column to X axis.
                                    x: '消费金额',
                                    // Map the "product" column to Y axis
                                    y: '客户'
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);


                    $("#serviceBody").html(html);

                }});
        }
    });
</script>
<body>
<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>客户贡献分析</h3>
        </div>
    </div>
</div>


<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:600px;"></div>


<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

    <div class="form-group">
        <div class="input-group">
            <div class="input-group-addon">客户名称</div>
            <input type="text" class="form-control" id="chart-contribution-custName">

            <div class="input-group-addon">年份</div>
            <select class="form-control" id="chart-contribution-year">
                <option>2021</option>
                <option>2020</option>
                <option>2019</option>
            </select>

        </div>
    </div>

    <button type="submit" class="btn btn-default" id="searchBtn">查询</button>

</form>

<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td>编号</td>
                    <td>客户名称</td>
                    <td>订单总金额</td>
                </tr>
                </thead>
                <tbody id="serviceBody">

                </tbody>
            </table>
        </div>

    </div>

</div>
</body>
</html>
